<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background: #fefefe;
		}
		.box {
			border: 1px solid #007aff;
			height: 400px;
			margin: 30px 100px;
			position: relative;
		}
		.line {
			position: absolute;
			top: 10px;
			left: 50%;
			background: red;
			width: 10px;
			height: 200px;
			transform-origin:center top;
			-webkit-transform: rotate(30deg);
			-webkit-animation: baidong 2s infinite alternate ease-in-out;
		}
		.ball {
			background: #007aff;
			width: 100px;
			height: 100px;
			position: absolute;
			top: 220px;
			left: 50%;
			margin-left: -50px;
			border-radius: 50%;
			transform-origin:center top;
			-webkit-transform: rotate(60deg);
			-webkit-animation: baidong2 2s infinite alternate ease-in-out;
		}
		
		@-webkit-keyframes baidong {
			to { -webkit-transform: rotate(-30deg); }
		}
		@-webkit-keyframes baidong2 {
			to { -webkit-transform: rotate(-60deg); }
		}
		.box2 {
			position: relative;
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}
		.inner-box {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100px;
			height: 100px;
			border-top: 10px solid #1234ef;
			border-left: 10px solid #1234ef;
			border-right: 10px solid #FFA500;
			border-bottom: 10px solid #FFA500;
			border-radius: 50%;
			box-sizing:border-box;
			transition:all .4s;
		}
		.inner-box-back {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			opacity: 0;
			transition:all 1s;
		}
		.box2:hover .inner-box-back {
			opacity: 1;
		}
		.inner-box-back img{
			height: 100%;
			width:100%;
			border-radius: 50%;

		}
		.inner-box:hover {
			transform:rotate(180deg);
		}

		.btn-container,.btn-border ,.btn{
			width: 70px;
			height: 70px;
			border-radius: 50%;
			
		}

		.btn-container {
			margin-left: 100px;
			background: #fff;
			position: relative;
		}

		.btn-border {
			border: 5px solid #0077fa;
			box-sizing:border-box;
			opacity: 0.1;
			position: absolute;
			top: 0;
			left: 0;
		}
		.btn {
			background: #ccc;
			/*box-sizing:border-box;*/
			top: 10px;
			left: 10px;
			box-shadow: 2px 2px 2px #333 inset;
			transition:all .3s;
		}
		.btn-container:hover .btn{
			background: #DEB887;
			opacity: .3;
			-webkit-transform:scale(1.2);
		}
		.btn-container:hover .btn .arrow{
			/*border-right:10px solid #DEB887;
			border-bottom:10px solid #DEB887;
			border-top:10px solid #DEB887;*/
		}
		.arrow{
			transition:all .1s;

			width: 0;
			height: 0;
			border-left:10px solid #0077fa;
			border-right:10px solid transparent;
			border-bottom:10px solid transparent;
			border-top:10px solid transparent;
			position: absolute;
			top:50%;
			margin-top: -10px;
			margin-left: 45%;
			transform:translateY(-10);
		}
	</style>
</head>
<body>
	<!-- <div class="box">
		<div class="line"></div>
		<div class="ball"></div>
	</div> -->

	<div class="box box2">
		<div class="inner-box-back">
			<img src="http://p4.qhimg.com/t0119ba9a310ba93229.jpg" alt="">
		</div>
		<div class="inner-box">
		</div>
	</div>

	<div class="btn-container">
		<div class="btn">
			<div class="arrow"></div>
		</div>
		<div class="btn-border">
		</div>
	</div>
</body>
</html>